<template>
  <div class="loginOuter">
    <div class="login_box">
      <form class="registerFrom">
        <span class="topName">注 册</span>
        <div class="input_box">
          <input type="text" maxlength="12" placeholder="请输入用户名" v-model="username">
        </div>
        <div class="RegistrationDetectionInput" v-if="showDetection.showOne">
          <span>用户名格式不正确</span>
        </div>
        <div class="input_box">
          <input
            maxlength="29"
            type="password"
            @click.stop="inputShow"
            placeholder="请输入登录密码"
            v-model="password"
          >
        </div>
        <div class="RegistrationDetectionInput">
          <span v-if="showDetection.showTwo">密码格式不正确</span>
          <div ref="passwd" :class="{show:isActive}" class="dropdown-content">
            <ul ref="passwdUl">
              <li>密码必须以至少一个字母开头</li>
              <li>密码应为6-20个字符</li>
              <li>只能包含字母、数字</li>
            </ul>
          </div>
        </div>
        <div class="input_box">
          <input type="password" maxlength="29" placeholder="请再次输入登录密码" v-model="passwordTwo">
        </div>
        <div class="RegistrationDetectionInput" v-if="showDetection.showThree">
          <span>两次输入密码不一致</span>
        </div>
        <div class="input_box tel">
          <input type="text"
                 maxlength="11"
                 oninput="value=value.replace(/[^\d]/g,'')"
                 placeholder="请输入手机号"
                 v-model="tel"
          >
          <div class="RegistrationDetectionInput" v-if="showDetection.showFour">
            <span>手机号码格式不正确，请重新输入</span>
          </div>
        </div>
        <div class="verify">
          <input type="text"
                 maxlength="6"
                 oninput="value=value.replace(/[^\d]/g,'')"
                 placeholder="请输入验证码"
                 v-model="code"
          >
          <span>
            <button type="button" @click="getCode">发 送</button>
          </span>
          <div class="RegistrationDetectionInput" v-if="showDetection.showFive">
            <span>验证码错误，请重新输入</span>
          </div>
        </div>
        <div class="agreementSigned">
          <input type="checkbox" checked ref="protocol" @click="registerVerify">
          <span>我已阅读并同意<a href="javascript:">第三方账号绑定相关协议</a></span>
          <div class="RegistrationDetection" v-if="showDetection.showSix">请勾选同意协议</div>
        </div>
        <button class="registerButton" @click="registerGo">注册</button>
      </form>
    </div>
  </div>
</template>

<script>
export default {
  name: "Register",
  data(){
    return{
      username:'',
      password:'',
      passwordTwo:'',
      code:'',
      tel:'',
      showDetection:{
        showOne:false,
        showTwo:false,
        showThree:false,
        showFour:false,
        showFive:false,
        showSix:false,
      },
      isActive:false,
    }
  },

  // 密码的三个条件验证
  watch:{
    // 监视密码是否为6-20个字符
    password:{
      handler(newVal){
        let lis = this.$refs.passwdUl.children
        let showPasswdERR = [false,false,false]
        // 密码在6-20字符间
        if (newVal.length>5 && newVal.length<21){
          lis[1].style = "color:green"
          showPasswdERR.splice(0,1,false)
        }else {
          lis[1].style = "color:red"
          showPasswdERR.splice(0,1,true)
        }
        // 监视密码是否只包含数字和字母
        let passwdTest2 = /[A-z0-9]/
        if (passwdTest2.test(newVal)){
          lis[2].style = "color:green"
          showPasswdERR.splice(1,1,false)
        }else {
          lis[2].style = "color:red"
          showPasswdERR.splice(1,1,true)
        }

        //密码由首字母开头
        let passwdTest0 = /^[A-z]/
        if (passwdTest0.test(newVal)){
          lis[0].style = "color:green"
          showPasswdERR.splice(2,1,false)
        }else {
          lis[0].style = "color:red"
          showPasswdERR.splice(2,1,true)
        }

        if (showPasswdERR.indexOf(true) === -1){
          this.showDetection.showTwo = false
        }else {
          this.showDetection.showTwo = true
        }

        this.showDetection.showThree = newVal !== this.passwordTwo;
      }
    },
    passwordTwo:{
      handler(newVal){
        this.showDetection.showThree = newVal !== this.password;
      }
    },
    tel:{
      handler(newVal){
        let telNumber = /^1[3-9][0-9]{9}$/
        this.showDetection.showFour = !telNumber.test(newVal);
      }
    },
    code:{
      handler(newVal){
        console.log(newVal)
        if (this.$store.state.user.code !== newVal){
          this.showDetection.showFive = true
        }else {
          this.showDetection.showFive = false
        }
      }
    }
  },

  methods:{
    //点击注册，对信息进行检测
    registerVerify(){
      //获取checked值
      this.showDetection.showSix = !this.$refs.protocol.checked;
    },
    // 点击密码input框打开关闭菜单
    inputShow() {
      this.isActive = !this.isActive
    },

    // 获取手机验证码
    async getCode(){
      try {
        this.tel && await this.$store.dispatch('registerCode')
        this.code = this.$store.state.user.code
      } catch (error){
        alert(error.message)
      }
    },

    // 判断信息是否为空或有误
    async registerGo(){
      let {username,password,passwordTwo,tel,code} = this
      if (username==='' || password === '' || passwordTwo === '' || tel === '' || code === ''){
        this.$message('输入信息不能为空');
        return null
      }else if (Object.values(this.showDetection).indexOf(true) !== -1){
        this.$message('填写信息有误');
        return null
      }

      //注册
        await this.$store.dispatch('getRegister',{username,tel,password})
    },

  },
  mounted() {
    // 点击其他地方密码菜单框收起来
    window.addEventListener('click',()=>{
      this.isActive = false
    })
  },
}
</script>

<style scoped>
.topName{
  font-size: 2vw;
  color: #ffffff90;
}

.loginOuter{
  width: 100vw;
  min-height: 100vh;
  background-image: url("./images/loginBackground.jpg");
}

.login_box {
  display: flex;
  width: 20vw;
  background-color: rgba(21, 20, 20, 0.38);
  margin: 12vh auto auto auto;
  text-align: center;
  border-radius: 10px;
  padding: 4.5vh 3vw;
}

.registerFrom{
  margin: auto;
}

.input_box input {
  border: 0;
  width: 12vw;
  font-size: 1vw;
  color: #ffffff90;
  background: transparent;
  border-bottom: 1px solid #fff;
  padding: 0.5vh 1vw;
  outline: none;
  margin-top: 1.5vh;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: rgba(255, 255, 255, 0.75);
  width: 12vw;
  padding: 1vh 1vw;
  overflow: auto;
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.dropdown-content li {
  list-style: none;
  font-size: 0.8vw;
  color: red;
  text-align: left;
}

.show {
  display: block;
}

.verify input{
  border: 0;
  width: 7.5vw;
  font-size: 1vw;
  color: #ffffff90;
  background: transparent;
  border-bottom: 1px solid #fff;
  padding: 0.5vh 1vw;
  outline: none;
  margin-top: 1.5vh;
}
.verify button{
  max-height: 8vh;
  overflow: hidden;
  width: 4.4vw;
  padding: 0.6vh 0;
  font-size: 0.8vw;
  border-radius: 10px;
  cursor:pointer;
  border-style: none;
  background-image: linear-gradient(to right, #30cfd0, #330867);
  color: #ffffff90;
}

.registerButton {
  margin-top: 3vh;
  width: 12vw;
  border-radius: 10px;
  border: 0;
  color: #ffffff90;
  text-align: center;
  /*line-height: 4vh;*/
  padding: 0.5vh 0;
  font-size: 1.2vw;
  background-image: linear-gradient(to right, #30cfd0, #330867);
}

.agreementSigned a{
  text-decoration-line: none;
  font-size: 0.8vw;
  color: darksalmon;
}
.agreementSigned{
  margin-top: 3vh;
  font-size: 0.7vw;
  color: #ffffff90;
}

.agreementSigned span{
  position: relative;
  top: -0.3vh;
}

.RegistrationDetection{
  width: 12vw;
  text-align: left;
  color: darksalmon;
}
.RegistrationDetectionInput{
  display: flex;
  width: 14vw;
  margin: auto;
}
.RegistrationDetectionInput span{
  margin-top: 0.3vh;
  float: left;
  text-align: left;
  color: darksalmon;
  font-size: 0.7vw;
}
</style>
